<template>
  <navbar :title="'购物车'" :count="cartList.length"></navbar>
  <div class="cart_container">
    <div v-if="!token">
      <van-empty description="请登录">
        <van-button round type="primary" class="bottom-button" @click="ToLogin">登录</van-button>
      </van-empty>
    </div>
    <div v-else>
      <!-- 全场换购 -->
      <div class="tradeIn">
        <div class="tradeIn_top">
          <div class="tradeIn_left">
            <span class="tradeIn_title">全场换购</span>
          </div>
          <div class="tradeIn_right">
            <span class="tradeIn_intro">已满0.01元,可选择10件商品换购</span>
            <span class="tradeIn_to">去换购 <ArrowRight style="width: 10px"></ArrowRight></span>
          </div>
        </div>
        <div class="tradeIn_bottom">
          <div class="tradeIn_list">
            <div class="tradeIn_item">
              <img
                src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146">
              <div class="intro">
                <div class="title_price">
                  <div class="title">江南特产，西湖藕粉 原味 20克*15袋</div>
                  <div class="detail">原味藕粉 20克*15袋</div>
                </div>
                <div class="price">
                  <span style="color: #FA1E32;">换购价</span>
                  <span style="color: #FA1E32; font-weight: bold; font-size: 16px;">￥20.8 </span>
                  <span style="color: #999; font-size: 11px; text-decoration: line-through;">￥25</span>
                </div>
              </div>
            </div>
            <div class="tradeIn_item">
              <img
                src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146">
              <div class="intro">
                <div class="title_price">
                  <div class="title">江南特产，西湖藕粉 原味 20克*15袋</div>
                  <div class="detail">原味藕粉 20克*15袋</div>
                </div>
                <div class="price">
                  <span style="color: #FA1E32;">换购价</span>
                  <span style="color: #FA1E32; font-weight: bold; font-size: 16px;">￥20.8 </span>
                  <span style="color: #999; font-size: 11px; text-decoration: line-through;">￥25</span>
                </div>
              </div>
            </div>
            <div class="tradeIn_item">
              <img
                src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146">
              <div class="intro">
                <div class="title_price">
                  <div class="title">江南特产，西湖藕粉 原味 20克*15袋</div>
                  <div class="detail">原味藕粉 20克*15袋</div>
                </div>
                <div class="price">
                  <span style="color: #FA1E32;">换购价</span>
                  <span style="color: #FA1E32; font-weight: bold; font-size: 16px;">￥20.8 </span>
                  <span style="color: #999; font-size: 11px; text-decoration: line-through;">￥25</span>
                </div>
              </div>
            </div>
            <div class="tradeIn_item">
              <img
                src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146">
              <div class="intro">
                <div class="title_price">
                  <div class="title">江南特产，西湖藕粉 原味 20克*15袋</div>
                  <div class="detail">原味藕粉 20克*15袋</div>
                </div>
                <div class="price">
                  <span style="color: #FA1E32;">换购价</span>
                  <span style="color: #FA1E32; font-weight: bold; font-size: 16px;">￥20.8 </span>
                  <span style="color: #999; font-size: 11px; text-decoration: line-through;">￥25</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 购物车列表 -->
      <div class="cart_list">
        <!-- cart_item -->
        <div class="cart_item" v-for="item in cartList" :key="item.id">
          <div class="title">
            <div style="margin-left: 10px;">{{ item.skuName.split(' ')[0] }}</div>
            <div class="other">已满99元包邮</div>
          </div>
          <!-- 单个商品(循环) -->
          <div class="item_intro">
            <van-checkbox v-model="item.isChecked"
              @click="changeCheckedHandler(item.skuId, item.isChecked ? '1' : '0')" />
            <div class="item">
              <div class="image">
                <img :src="item.imgUrl">
              </div>
              <div class="intro">
                <div class="shoptitle">{{ item.skuName }}</div>
                <div class="classify">
                  <span style="width:90%;">白色/C2005;S(165/88A)</span>
                  <img src="https://yanxuan.nosdn.127.net/static-union/16705682335daa1d.png" @click="showPopup(item)">
                </div>
                <div class="onSale">距优惠结束&nbsp;
                  <van-count-down :time="time" format="HH:mm:ss">
                    <template #default="timeData">
                      <span style="color: #FA1E32; font-weight: bold; font-size: 14px;">
                        {{ timeData.hours < 10 ? "0" + timeData.hours : timeData.hours }} : {{ timeData.minutes }} : {{
                          timeData.seconds < 10 ? "0" + timeData.seconds : timeData.seconds }} </span>
                    </template>
                  </van-count-down>
                </div>
              </div>
            </div>

            <div class="buy">
              <div class="price">￥{{ item.skuPrice }}</div>
              <div class="count">
                <a href="javascript:;" class="minus" @click="changeCount(item, '-1')">-</a>
                <input type="text" class="text" autocomplete="off" minnum="1" :value="item.skuNum">
                <a href="javascript:;" class="plus" @click="changeCount(item, '1')">+</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部结算 -->
      <div class="footer">
        <div class="check">
          <van-checkbox v-model="isAllChecked" @click="allCheckedHandler()">
            <span style="color: #7f7f7f; margin-left: 7px;">全选</span>
          </van-checkbox>
        </div>
        <div class="right">
          <span style="color: #7f7f7f;font-size: 14px; margin-right: 7px;" @click="deleteShopCart">删除</span>
          <div class="total">合计: ￥{{ totalPrice }}</div>
          <div class="btn" @click="ToPay">结算({{ totalCount }})</div>
        </div>
      </div>

      <!-- 弹出层 -->
      <van-popup v-model:show="show" position="bottom" closeable :style="{ 'min-height': '50%' }">
        <div class="pop">
          <div class="pop_top">
            <div class="left">
              <img :src="detail.imgUrl">
            </div>
            <div class="price_choice">
              <div class="price">价格:￥{{ detail.skuPrice }}</div>
              <div class="choice">已选择: 杏色 37</div>
            </div>
          </div>
          <div class="pop_bottom">
            <div class="pop_cate">
              <div class="pop_title">颜色</div>
              <div class="item_list">
                <div class="item_item">棕色</div>
                <div class="item_item">杏色</div>
                <div class="item_item">粉色</div>
                <div class="item_item">灰色</div>
              </div>
            </div>
            <div class="pop_cate">
              <div class="pop_title">尺码</div>
              <div class="item_list">
                <div class="item_item">棕色</div>
                <div class="item_item">杏色</div>
                <div class="item_item">粉色</div>
                <div class="item_item">灰色</div>
                <div class="item_item">棕色</div>
                <div class="item_item">杏色</div>
                <div class="item_item">粉色</div>
                <div class="item_item">灰色</div>
              </div>
            </div>

            <div class="pop_cate">
              <div class="pop_title">数量</div>
              <div class="btn">
                <div class="plus" style="border-right: 0px;">-</div>
                <input type="text" :placeholder="detail.skuNum">
                <div class="plus" style="border-left: 0px;">+</div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import type { CartListModel } from '../../api/cart'
import CartApi from '../../api/cart'
import { GET_TOKEN } from '../../utils/token-utils'
import { useRouter } from 'vue-router'
const Router = useRouter()
const time = ref(50 * 60 * 60 * 1000);

// 响应式数据
const cartList = ref<CartListModel[]>([])
const isAllChecked = ref(false)
const totalPrice = ref(0)
const totalCount = ref(0)
const detail = ref<CartListModel>({})
const token = ref('')
const show = ref(false); // 弹出层
const showPopup = (item: CartListModel) => {
  show.value = true;
  detail.value = item
};

/* 生命周期函数 */
onMounted(() => {
  getCartList()
  // getShopDetail()
})

/* 事件的回调 */
const ToLogin = () => {
  Router.push({
    path: '/login'
  })
}
// 计算全选全不选
const isAllCheckedHandler = () => {
  let isChecked = cartList.value.every(item => {
    return item.isChecked === 1
  })
  isAllChecked.value = isChecked
}
// 计算总价
const compTotalPrice = () => {
  let res = cartList.value.reduce((prev, item) => {
    return prev + item.skuPrice * item.skuNum * item.isChecked
  }, 0)
  totalPrice.value = res
}
// 计算总数
const compTotalCount = () => {
  let res = cartList.value.reduce((prev, item) => {
    return prev + item.skuNum * item.isChecked
  }, 0)
  totalCount.value = res
}
// 修改商品数量
const changeCount = (item: any, count: string) => {
  console.log(item.isChecked)

  changeCountHandler(item.skuId, count)

}
// 删除商品
const deleteShopCart = () => {
  let list = cartList.value.filter(item => {
    return item.isChecked
  })
  let skuIdList = list.map(item => item.skuId)
  deleteShop(skuIdList)
}

/* 自定义事件的功能函数 */
// 获取购物车列表
const getCartList = async () => {
  try {
    let res = await CartApi.getCartList()
    if (res.code === 200) {
      cartList.value = res.data[0].cartInfoList
      isAllCheckedHandler() // 计算全选全不选
      compTotalPrice()      // 计算总价
      compTotalCount()      // 计算总数
    }
    console.log(cartList.value)
    token.value = GET_TOKEN()!
  } catch (error) {
    console.log(error)
  }
}
// 切换商品选中状态
const changeCheckedHandler = async (skuId: string, isChecked: string) => {
  await CartApi.changeChecked(skuId, isChecked)
  getCartList()
}
// 底部商品全选
const allCheckedHandler = async () => {
  let idList = cartList.value.map(item => item.skuId)
  try {
    let res = await CartApi.changeAllChecked(isAllChecked.value ? "1" : "0", idList)
    cartList.value.forEach(item => item.isChecked = isAllChecked.value)
  } catch (error) {
    console.log(error)
  }
}
// 修改商品的数量
const changeCountHandler = async (skuId: string, skuNum: string) => {
  try {
    await CartApi.addToCart(skuId, skuNum)
    getCartList()
  } catch (error) {
    console.log(error);
  }
}
// 批量删除商品
const deleteShop = async (skuIdList: CartListModel[]) => {
  try {
    let res = await CartApi.deletShopCart(skuIdList)
    getCartList()
  } catch (error) {
    console.log(error)
  }
}
// 加入购物车
const addTocart = async () => {
  await CartApi.addToCart("12", "1")
  getCartList()
}
// 获取商品详情
const getShopDetail = async () => {
  let skuId = '11'
  let res = await CartApi.ShopDetail(skuId)
  console.log(res)
}
// 去支付
const ToPay = () => {
  Router.push({
    path: '/pay'
  })
}


</script>

<style lang="less" scoped>
.bottom-button {
  width: 160px;
  height: 40px;
}

.cart_container {
  box-sizing: border-box;
  width: 100%;
  background-color: #eee;
  padding: 10px 10px 130px 10px;

  // 全场换购
  .tradeIn {
    box-sizing: border-box;
    height: 145px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding-right: 10px;

    .tradeIn_top {
      display: flex;
      justify-content: space-between;
      height: 45px;
      line-height: 45px;
      margin: 0 10px;

      .tradeIn_title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }

      .tradeIn_right {

        .tradeIn_intro {
          font-size: 12px;
          color: #333;
        }

        .tradeIn_to {
          font-size: 14px;
          color: #FA1E32;
          margin-left: 10px;
        }
      }
    }

    .tradeIn_bottom {
      width: 98%;
      height: 80px;
      margin: 0 10px;

      .tradeIn_list {
        overflow-x: scroll;
        display: flex;

        .tradeIn_item {
          display: flex;
          width: 225px;
          height: 70px;
          border-radius: 10px;
          background-color: #f4f4f4;
          margin-right: 10px;

          img {
            width: 70px;
            height: 70px;
            background-color: #eee;
            border-radius: 10px;
            margin-right: 10px;
          }

          .intro {
            width: 135px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            .title_price {
              .title {
                font-size: 13px;
                color: #666;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .detail {
                font-size: 12px;
                color: #999;
              }
            }

            .price {
              font-size: 14px;
            }
          }
        }
      }

      ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }
    }
  }

  // 购物车列表
  .cart_list {
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;

    .cart_item {
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
      margin-top: 10px;

      // 商品标题
      .title {
        display: flex;
        justify-content: space-between;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        color: #333;
        font-weight: bold;

        .other {
          font-size: 14px;
          color: #666;
          font-weight: 400;
        }
      }

      // 单个商品信息
      .item_intro {
        display: flex;
        position: relative;
        width: 100%;
        font-size: 14px;
        margin-bottom: 20px;

        .item {
          width: 100%;
          display: flex;

          .image {
            width: 90px;
            height: 99px;
            margin-right: 10px;

            img {
              width: 90px;
              height: 90px;
              vertical-align: bottom;
            }
          }

          .intro {
            width: 200px;

            .shoptitle {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 14px;
              color: #333;
            }

            .classify {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 150px;
              height: 20px;
              line-height: 20px;
              background-color: #f4f4f4;
              padding: 0 11px 0 6px;
              font-size: 12px;
              color: #7f7f7f;
              border-radius: 5px;

              img {
                width: 10px;
                height: 10px;
                background-color: #eee;
              }


            }

            .onSale {
              display: flex;
              width: 205px;
              height: 20px;
              line-height: 20px;
              background: linear-gradient(90.46deg, rgba(244, 130, 24, 0.2) -61.77%, rgba(255, 255, 255, 0.2) 99.6%);
              color: #fa1e32;
              font-size: 12px;
              margin-top: 8px;
              border-radius: 5px;
            }


          }
        }


      }

      .buy {
        position: absolute;
        bottom: 0;
        left: 124px;
        display: flex;
        justify-content: space-between;
        width: 200px;
        margin-top: 10px;

        .price {
          font-weight: bold;
          font-size: 20px;
          color: #333;
          margin-right: 20px;
        }

        .count {
          display: flex;
          position: absolute;
          right: 0;
          top: 6px;

          .minus {
            width: 16px;
            height: 20px;
            line-height: 20px;
            border: .5px solid #333;
            text-align: center;
            color: #666;
            border-right: 0;
          }

          .text {
            width: 35px;
            text-align: center;
            border: .5px solid #333;
          }

          .plus {
            width: 16px;
            height: 20px;
            line-height: 20px;
            border: .5px solid #333;
            text-align: center;
            color: #666;
            border-left: 0;
          }
        }
      }
    }
  }

  // 底部
  .footer {
    position: fixed;
    bottom: 50px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    padding: 0 10px 0 15px;
    box-sizing: border-box;

    .check {
      font-size: 14px;
    }

    .right {
      display: flex;

      .total {
        font-size: 14px;
        color: #FA1E32;
        margin-right: 15px;
      }

      .btn {
        width: 112px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: #FA1E32;
        color: #fff;
        font-size: 14px;
        border-radius: 25px;
        margin-top: 10px;
      }
    }
  }

  // 弹出层
  .pop {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    font-size: 14px;

    .pop_top {
      display: flex;
      position: fixed;

      .left {
        img {
          width: 88px;
          height: 88px;
        }
      }

      .price_choice {
        margin-left: 10px;
        margin-top: 50px;
        font-size: 14px;

        .price {
          color: #FA1E32;
        }
      }
    }

    .pop_bottom {
      margin-top: 100px;

      .pop_cate {
        margin-top: 22px;

        .pop_title {
          font-size: 14px;
        }

        .item_list {
          display: flex;
          flex-wrap: wrap;

          .item_item {
            height: 33px;
            line-height: 33px;
            border: 0.8px solid #7f7f7f;
            box-sizing: border-box;
            text-align: center;
            font-size: 12px;
            padding: 0 12px;
            margin-right: 15px;
            border-radius: 2px;
            margin-top: 10px;
          }
        }

        .btn {
          display: flex;

          input {
            width: 66px;
            height: 33px;
            text-align: center;
            box-sizing: border-box;
          }

          .plus {
            width: 47px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            box-sizing: border-box;
            border: .8px solid #7f7f7f;
            font-size: 22px;
          }
        }
      }
    }
  }
}
</style>